<template>
  <!-- 文件平铺 -->
  <div class="file-grid-wrapper" @mousedown="cancelRightClickMenu">
    <ul
      class="file-list"
      v-loading="loading"
      element-loading-text="文件加载中……"
    >
      <li
        class="file-item"
        v-for="(item, index) in fileList"
        :key="index"
        :style="`width: ${gridSize + 80}px; `"
        :class="item.userFileId === selectedFile.userFileId ? 'active' : ''"
        @contextmenu.prevent="handleContextMenu(item)"
      >
        <GridItem :item="item"></GridItem>
        <div
          class="file-checked-wrapper"
          :class="{ checked: item.checked }"
          v-show="isBatchOperation"
          @click.stop.self="item.checked = !item.checked"
        >
          <el-checkbox
            class="file-checked"
            v-model="item.checked"
            @click.stop="item.checked = !item.checked"
          ></el-checkbox>
        </div>
      </li>
    </ul>
    <rightBox
      v-show="rightBoxVisable"
      ref="rightBoxMenu"
      @close="close"
    ></rightBox>
  </div>
</template>

<script setup>
import fileListPinia from "@/store/modules/fileList";
import { onMounted } from "@vue/runtime-core";
import rightBox from "../box/contextMenu/Box.vue";
import GridItem from "./GridItem";

const store = fileListPinia();
const props = defineProps({
  fileList: {
    type: Array,
  },
  loading: {
    type: Boolean,
  },
});
// 定义选中值
const selectedItem = ref({});
//const fileListSorted = ref([]);
const officeFileType = ref(["ppt", "pptx", "doc", "docx", "xls", "xlsx"]);
const selectedFile = ref({});
const gridSize = computed(() => store.gridSize);
const isBatchOperation = computed(() => store.isBatchOperation);
const rightBoxMenu = ref(null);
const rightBoxVisable = ref(false);
const mouseEvent = ref();

//监听被选择的文件
watch(
  () => props.fileList,
  (val) => {
    let res = val.filter((item) => item.checked);
    store.changeSelectedFiles(res);
    store.changeIsBatchOperation(res.length !== 0);
  },
  { deep: true, immediate: true }
);

onMounted(() => {
  document.body.addEventListener("mousedown", (e) => {
    mouseEvent.value = e;
  });
});
function handleContextMenu(row) {
  //如果之前已经打开了先关闭一下。
  rightBoxVisable.value = false;
  setTimeout(() => {
    rightBoxVisable.value = true;
  }, 300);
  rightBoxMenu.value.onload(row, undefined, mouseEvent.value);
}
//左键点击取消右键菜单界面
function cancelRightClickMenu(e) {
  if (
    e.button === 0 &&
    rightBoxVisable.value === true &&
    e.path[1].id !== "right-key-menu"
  ) {
    rightBoxVisable.value = false;
  }
}
function close() {
  rightBoxVisable.value = false;
}
</script>

<style lang="stylus" scoped>
.file-grid-wrapper {
  border-top: 1px solid #DCDFE6;

  .file-list {
    height: calc(100vh - 206px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    list-style: none;
    setScrollbar(6px, transparent, #C0C4CC);

    .file-item {
      margin: 0 16px 16px 0;
      position: relative;
      padding: 8px;
      text-align: center;
      cursor: pointer;
      z-index: 1;

      &:hover {
        background: $tabBackColor;

        .file-name {
          font-weight: 550;
        }
      }

      .file-name {
        margin-top: 8px;
        height: 44px;
        line-height: 22px;
        font-size: 12px;
        word-break: break-all;
        setEllipsis(2);

        >>> .keyword {
          color: $Danger;
        }
      }

      .file-checked-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        background: rgba(245, 247, 250, 0.5);
        width: 100%;
        height: 100%;

        .file-checked {
          position: absolute;
          top: 16px;
          left: 24px;
        }
      }

      .file-checked-wrapper.checked {
        background: rgba(245, 247, 250, 0);
      }
    }

    .file-item.active {
      background: $tabBackColor;
    }
  }

  .right-menu-list {
    position: fixed;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid $BorderLighter;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 2;
    padding: 4px 0;
    color: $RegularText;

    .right-menu-item, .unzip-item {
      padding: 0 16px;
      height: 36px;
      line-height: 36px;
      cursor: pointer;

      &:hover {
        background: $PrimaryHover;
        color: $Primary;
      }

      i {
        margin-right: 8px;
      }
    }

    .unzip-menu-item {
      position: relative;

      &:hover {
        .unzip-list {
          display: block;
        }
      }

      .unzip-list {
        position: absolute;
        display: none;

        .unzip-item {
          width: 200px;
          setEllipsis(1);
        }
      }
    }
  }

  .right-menu-list, .unzip-list {
    background: #fff;
    border: 1px solid $BorderLighter;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 2;
    padding: 4px 0;
    color: $RegularText;
  }
}
</style>